import React, { useRef, useEffect, useMemo } from 'react';
import { connect } from 'dva';
import { Link, Route, Switch } from 'dva/router';
import { Radio, Card, Button, Tag } from 'antd';
import {
    ArrowUpOutlined,
    ArrowDownOutlined,
    DownloadOutlined,
} from '@ant-design/icons';
import ReactEcharts from 'echarts-for-react';
import html2canvas from 'html2canvas';

function CostPieChart({ title, dataSource }) {
    let textColor = 'rgba(0, 0, 0, 0.85)';
    let seriesData = [];
    let textToKey = {};
    let total = 0;
    let data;
    if ( dataSource === '1' ) {
        data = [
            { sumUsage:100, name:'尖', cost:200, itemStyle:{ color:'#f53f3f' } }, 
            { sumUsage:200, name:'峰', cost:300, itemStyle:{ color:'#ff7d00' } }, 
            { sumUsage:300, name:'平', cost:400, itemStyle:{ color:'#165dff' } }, 
            { sumUsage:400, name:'谷', cost:500, itemStyle:{ color:'#00b42a' } }
        ];
    } else if ( dataSource === '2' ) {
        data = [
            { sumUsage:100, name:'制冷主机', cost:200, itemStyle:{ color:'#165dff'} }, 
            { sumUsage:200, name:'冷却泵', cost:200, itemStyle:{ color:'#712dd1'} }, 
            { sumUsage:300, name:'冷冻泵', cost:600, itemStyle:{ color:'#00b42a'} }, 
            { sumUsage:400, name:'冷却塔', cost:400, itemStyle:{ color:'#ff7d00'} }
        ];
    } else if ( dataSource === '3' ) {
        data = [
            { sumUsage:100, name:'电', cost:810, itemStyle:{ color:'#165dff' }}, 
            { sumUsage:200, name:'水', cost:420, itemStyle:{ color:'#00b42a' }}, 
        ];
    }
    if ( data.length ) {
        data.forEach(item=>{
            total += item.cost;
            seriesData.push({
                name:item.name,
                value:item.cost,
                itemStyle:item.itemStyle
            });
        })
    } 
    return (
        <ReactEcharts
            notMerge={true}
            style={{ height: '100%' }}
            option={{
                title: {
                    text: title,
                    textStyle: {
                        fontSize: 14,
                    },
                    left: 20,
                    top: 10,
                },
                legend: {
                    
                        data: seriesData.map((i) => i.name),
                        left: 'center',
                        top: '54%',
                        // top:'12%',
                        // bottom:'10%',
                        orient: 'vertical',
                        type: 'scroll',
                        itemWidth: 8,
                        itemHeight: 8,
                        icon: 'circle',
                        formatter: (name) => {
                            // let temp = findData(name, seriesData);
                            let obj = seriesData.filter(i=>i.name === name)[0];

                            return `${name}\xa0\xa0\xa0\xa0{title|${(obj.value/total*100).toFixed(1)}%}\xa0\xa0\xa0\xa0{value|${obj.value}} {title|元}`;
                        },
                        textStyle: {
                            color: textColor,
                            rich: {
                                title: {
                                    fontSize: 12,
                                    lineHeight: 12,

                                    color: textColor,
                                },
                                value: {
                                    fontSize: 14,
                                    fontWeight: 'bold',
                                    lineHeight: 20,
                                    color: textColor,
                                },
                            },
                        },
                },
                
                tooltip: {
                    trigger: 'item',
                },
                color: ['#ff7d00', '#f53f3f', '#0fc6c2', '#fadc19', '#9fdb1d'],
                series: [
                    {
                        label: {
                            show: false,
                            position: 'center',
                            // formatter: (params) => {
                            //     return `{a|${data.warningTotal || 0}}{b|件}\n{b|总告警}`;
                            // },
                            rich: {
                                a: {
                                    color: textColor,
                                    fontSize: 22,
                                    padding: [0, 4, 0, 0],
                                },
                                b: {
                                    color: '#8a8a8a',
                                    fontSize: 12,
                                    padding: [6, 0, 6, 0],
                                },
                            },
                        },
                        itemStyle: {
                            borderWidth: 2,
                            borderColor: '#fff',
                        },
                        labelLine: {
                            show: false,
                        },
                        type: 'pie',
                        radius: ['40%', '50%'],
                        center: ['50%', '26%'],
                        data: seriesData,
                    }
                ],
            }}
        />
    );
}

export default React.memo(CostPieChart);
